<template>
    <div class="index-container" id="memuBox">
        <div class="wrapper" id="wrapper" v-cloak >
            <!-- <change-city :onoff="showCity" v-model="showCity"></change-city> -->
            <div class="leftMenu">
                <City :currenSotre="currenCity"></City>
                <div class="navMenu">
                    <div class="nav">
                        <div>
                            <el-menu
                            :default-active="showSub"
                            background-color="#262b37"
                            text-color="rgba(255,255,255,0.5)"
                            active-text-color="#fff"
                            :unique-opened="true"
                            >
                                <NavMenu :navMenus="menuData" :menuArray='toMenuCom' v-on:getMenuId='getMid'></NavMenu>
                            </el-menu>                            
                        </div>
                    </div>
                </div>
           
        </div>
        <div class="view-container">
            <div class="header">
                <div class="header-l"></div>
                <div class="header-r">
                    <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        <img :src="userInfo.thumb" alt="">
                        <span class="userName">{{userInfo.name}}</span>
                        <i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item class="clearfix">
                            <span @click="open">退出</span>                        
                        </el-dropdown-item>
                        <el-dropdown-item class="clearfix">
                            <router-link to='./password'>修改密码</router-link>                         
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="containerInfo">
                <router-view></router-view>
            </div>
        </div>
        
    </div>
</div>
</template>




<style lang="scss" scoped>
.index-container{
    height: 100%;
    .wrapper{
        width: 100%;height: 100%;display:flex;
        .leftMenu {
            width: 220px;height: 100%;overflow-x: hidden;overflow-y: scroll;background:rgb(38, 43, 55);
            .storename {
                font-size: 0;position: relative;
                .changeStore {
                    cursor: pointer
                }
                img {
                    width: 32px;height: 32px;border-radius: 50%; border: 4px solid rgb(38, 43, 55);margin: 10px;
                }
                span {
                    font-size: 14px;color: rgba(255, 255, 255, .8);line-height: 60px; width: 140px;
                }
            }
            .nav {
                height: 100%;transition: all .3s;
                
                .nav-item {
                    position: relative;
                }
                a {
                    display: block; 
                    overflow: hidden;
                    line-height: 46px;
                    max-height: 46px;
                    color: #ABB1B7;
                    transition: all .3s;
                    span {
                        margin-left: 5px;display: inline-block;width: 120px;
                    }
                }
            }

        }
        .leftMenu::-webkit-scrollbar {
            display: none;
        }
        .view-container{
            width:calc( 100% - 220px );
            background: #e8eaf1;
            display: flex;
            flex-direction: column;
            .header{
                width:100%;
                // flex-grow: 1;
                display: flex;
                justify-content: space-between;
                height: 61px;
                line-height:61px;
                background: #fff;
                border-bottom:1px solid #DCDFE6;
                .header-l{
                    flex-grow: 1;
                }
                .header-r{
                    padding-right:20px;
                    .el-dropdown-selfdefine{
                        display: table-cell;
                        img{
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            border: 4px solid rgba(46, 52, 68, 0.1);
                            line-height: 40px;
                            vertical-align:middle;
                        }
                    }
                    
                }    
            }
            .containerInfo{
                flex-grow: 1;
                overflow-y: auto;
            }
        }
    }
}


</style>





<script>
import {abc}  from "../../js/abc.js"
import {potUrl} from '../../js/config_url.js';
import NavMenu from "./menu.vue";
import City from "./city.vue";
export default {
    components: {
        NavMenu: NavMenu,
        City:City,
    },
    data() {
        
        return {
        activeIndex: 'aa',
        menuData: [],
        currenCity:{},
        userInfo:{},
        toMenuCom:[],
        showSub:''
        };
    },
    methods:{
        
        open() {
            var that = this;
            that.$confirm('是否要退出登录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                abc.post(that,potUrl.outLogin,{},function(res){
                    abc.deleteSession()
                    that.$router.push('/login')
                })
                
            }).catch(() => {
                      
            });
        },
        getMid(id){
            this.showSub=id
            // console.log('ddfdfd',id)
        }
    },
    created(){
        var that = this;
        if(abc.getSession('token') != null && abc.getSession('token') != '' && abc.getSession('token') != undefined){
            // console.log('11111111111111111111111111',abc.getSession('token'))
            var str = abc.getSession('menu_list')
            var str2 = abc.getSession('store')
            var user_id = abc.getSession('user_id');
            var name = abc.getSession('name');
            var thumb = abc.getSession('thumb');
            this.userInfo.user_id = user_id;
            this.userInfo.name = name;
            this.userInfo.thumb = thumb;
            var listobj = JSON.parse(str);
            var menuArray = []//將menu_id和url添加到這裡；
            $.each(listobj,function(s,item){                
                if(item.sub_menu.length != 0){
                    $.each(item.sub_menu,function(ss,items){
                        var menuNeed2={};
                        menuNeed2.menu_id=items.menu_id;
                        menuNeed2.url= items.url.split('/')[items.url.split('/').length-1].split('.')[0];
                        menuArray.push(menuNeed2)
                        if(items.sub_menu.length != 0){
                            var arr = [];
                            $.each(items.sub_menu,function(sss,itemss) {
                                var obj = {};
                                obj.name = itemss.name;
                                obj.url = itemss.url;
                                arr.push(obj)
                            }) 
                            items.subStr = arr                           
                        }
                        
                        items.sub_menu = [];
                    })
                }else{
                   var menuNeed2={};
                    menuNeed2.menu_id=item.menu_id;
                    menuNeed2.url= item.url.split('/')[item.url.split('/').length-1].split('.')[0];
                    menuArray.push(menuNeed2) 
                }
            })
            // console.log('aaaaaa',listobj)
            
            var listobj2 = JSON.parse(str2)
            this.menuData =  listobj;
            this.currenCity = listobj2;
            this.toMenuCom = menuArray
        }else{
            that.$router.push('/login')
        }
        
    }
}
</script>